import React from 'react';
import nprogress from 'nprogress';
import 'nprogress/nprogress.css';

interface Tcomponent {
  component: any;
}
/**
 * 从加载时到加载结束用nprogress
 * @param {*} importComponent 传入的组件
 * @returns 高阶组件封装过的
 *
 */

export default function asyncComponent(importComponent: any) {
  class AsyncComponent extends React.Component {
    state: Tcomponent;
    constructor(props: any) {
      super(props);
      // 开始加载
      nprogress.start();
      this.state = {
        component: null,
      };
    }

    async componentDidMount() {
      // Es6 解构赋值 先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
      const { default: component } = await importComponent();
      // 加载完成
      nprogress.done();
      this.setState({ component });
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props}></C> : null;
    }
  }
  return AsyncComponent;
}
